<template>
  <div class="el_card_main">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="searchParams" class="demo-form-inline">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="目录名称">
                <el-input
                  v-model="searchParams.subjectName"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select
                  v-model="searchParams.state"
                  style="width: 215px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in status"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button style="padding: 3px 0" @click="clearContent"
                  >清空</el-button
                >
                <el-button
                  style="padding: 3px 0"
                  type="primary"
                  @click="searchSubject"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item style="float: right">
                <el-button
                  style="padding: 3px 0"
                  icon="el-icon-edit"
                  type="success"
                  @click="addSubject"
                  >新增目录</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-alert :title="totalCount" type="info" show-icon :closable="closable">
      </el-alert>
      <!-- 用户列表 -->
      <div class="text item">
        <el-table :data="Subjectlist" style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="180"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
            width="180"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="directoryName"
            label="目录名称"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
            header-align="center"
            align="center"
          >
            <template #default="{ row }">
              <span>{{ parse(row.addDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="totals"
            label="面试题数量"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            header-align="center"
            align="center"
          >
            <template #default="{ row }">
              <span>{{ row.state === 1 ? '已启用' : '已禁用' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" header-align="center" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.state === 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="changeStates(scope.row)"
                  >启用</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="updateSubject(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="delSubject(scope.row)"
                  >删除</el-button
                >
              </template>
              <template v-else>
                <el-button
                  size="mini"
                  type="text"
                  @click="changeStates(scope.row)"
                  >禁用</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  disabled
                  @click="updateSubject(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  disabled
                  @click="delSubject(scope.row)"
                  >删除</el-button
                >
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <SubAdd
        ref="subAdd"
        @getSubjectList="getSubjectList"
        :isUpdate="isUpdate"
      />
      <!-- 放置分页组件 -->
      <el-row type="flex" style="height: 60px" align="middle" justify="end">
        <!-- 放置分页组件 -->
        <el-pagination
          layout="prev, pager, next, sizes,jumper"
          :total="total"
          :current-page="queryObj.page"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="queryObj.pagesize"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { list, detail, remove, changeState } from '@/api/hmmm/directorys.js'
import SubAdd from '@/module-hmmm/components/directorys-add'
import { parseTime } from '@/utils/index.js'
export default {
  components: {
    SubAdd
  },
  data () {
    return {
      Subjectlist: [],
      isUpdate: false,
      total: 0,
      queryObj: {
        page: 1,
        pagesize: 10
      },
      searchParams: {
        page: 1,
        pagesize: 10,
        subjectName: '',
        state: ''
      },
      status: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ]
    }
  },
  methods: {
    // 目录列表
    async getSubjectList () {
      const { data } = await list(this.queryObj)
      console.log(data)
      this.total = data.counts
      this.Subjectlist = [...data.items]
    },
    // 页数变化时触发
    handlePageChange (pageNum) {
      this.queryObj.page = pageNum
      this.getSubjectList()
    },
    // 每页显示信息条数
    handleSizeChange (pageSize) {
      this.queryObj.pagesize = pageSize
      this.getSubjectList()
    },
    // 新增学科
    addSubject () {
      this.$refs.subAdd.showDialog = true
    },
    // 搜索学科
    async searchSubject () {
      const { data } = await list(this.searchParams)
      this.Subjectlist = [...data.items]
    },
    // 删除学科
    async delSubject (row) {
      const data = {
        id: row.id
      }
      await remove(data)
      this.getSubjectList()
    },
    // 修改学科
    async updateSubject (row) {
      this.$refs.subAdd.showDialog = true
      const data = {
        id: row.id
      }
      const res = await detail(data)
      this.$refs.subAdd.form.directoryName = res.data.directoryName
      this.$refs.subAdd.form.subjectID = res.data.subjectID
      this.$refs.subAdd.form.id = row.id
      this.isUpdate = true
    },
    // 修改目录状态
    async changeStates (row) {
      const data = {
        id: row.id,
        state: row.state
      }
      await changeState(data)
      if (row.state === 1) {
        row.state = 0
      } else {
        row.state = 1
      }
      this.$message.success('操作成功!')
    },
    // 清空
    clearContent () {
      this.searchParams.subjectName = ''
      this.searchParams.state = ''
    },
    // 格式化时间
    parse (time) {
      const res = parseTime(time)
      return res
    }
  },
  computed: {
    totalCount () {
      return `数据一共${this.total}条`
    }
  },
  created () {
    this.getSubjectList()
  }
}
</script>

<style scoped lang="less">
.box-card {
  width: 1681px;
  margin: 0 auto;
  padding: 20px;
  margin-top: 20px;
  .el-input {
    width: 200px;
    height: 32px;
  }
  .addForm {
    .el-input {
      width: 280px;
      height: 36px;
    }
  }
  .el-button--default {
    width: 56px;
    height: 32px;
    margin: 0 0 0 15px;
  }
  .el-alert--info {
    margin-bottom: 20px;
  }
  .el-button--primary {
    width: 56px;
    height: 32px;
  }
  .el-button--success {
    width: 97px;
    height: 32px;
    font-size: 12px;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }
}
</style>
